<template>
  <div class="contact-form">
    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>在线留言</h3>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入您的姓名"
          />
        </el-form-item>
        
        <el-form-item label="公司名称" prop="company">
          <el-input
            v-model="formData.company"
            placeholder="请输入您的公司名称"
          />
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入您的联系电话"
          />
        </el-form-item>
        
        <el-form-item label="电子邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入您的电子邮箱"
          />
        </el-form-item>
        
        <el-form-item label="留言主题" prop="subject">
          <el-select
            v-model="formData.subject"
            placeholder="请选择留言主题"
            style="width: 100%"
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="留言内容" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="4"
            placeholder="请输入您的留言内容"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button
            type="primary"
            :loading="submitting"
            @click="submitForm"
          >
            提交留言
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { submitContactForm } from '@/api/contact'

const formRef = ref(null)
const submitting = ref(false)

const formData = reactive({
  name: '',
  company: '',
  phone: '',
  email: '',
  subject: '',
  content: '',
  department: '',
  title: '网站留言'
})

const subjectOptions = [
  { label: '产品咨询', value: 'product' },
  { label: '技术支持', value: 'support' },
  { label: '商务合作', value: 'business' },
  { label: '其他', value: 'other' }
]

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  company: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择留言主题', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      submitting.value = true
      try {
        const submitData = {
          ...formData,
          type: formData.subject,
          title: '网站留言'
        }
        await submitContactForm(submitData)
        ElMessage.success('留言提交成功，我们会尽快与您联系')
        resetForm()
      } catch (error) {
        ElMessage.error('提交失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    }
  })
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.contact-form {
  height: 100%;
  
  .form-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      padding: 25px;
      border-bottom: 1px solid #f0f2f5;
      
      h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        position: relative;
        padding-left: 15px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
          border-radius: 2px;
        }
      }
    }

    :deep(.el-card__body) {
      padding: 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    :deep(.el-form) {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .el-form-item {
        margin-bottom: 20px;
        
        &:last-child {
          margin-top: auto;
          margin-bottom: 0;
          padding-top: 10px;
        }
        
        .el-form-item__label {
          padding-bottom: 8px;
          font-size: 15px;
          font-weight: 500;
          color: #2c3e50;
        }

        .el-input__wrapper,
        .el-textarea__wrapper {
          background-color: #f8f9fa;
          box-shadow: none;
          border: 2px solid transparent;
          border-radius: 10px;
          padding: 0 15px;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: rgba(76, 175, 80, 0.3);
          }
          
          &.is-focus {
            background-color: #fff;
            border-color: #4CAF50;
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.1);
          }
          
          .el-input__inner {
            height: 40px;
            color: #2c3e50;
            
            &::placeholder {
              color: #a8aeb6;
            }
          }
        }
        
        .el-textarea__wrapper {
          padding: 10px 15px;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .form-card {
      .card-header {
        padding: 20px;
        
        h3 {
          font-size: 20px;
        }
      }
      
      :deep(.el-card__body) {
        padding: 20px;
      }
      
      :deep(.el-form) {
        .el-form-item {
          margin-bottom: 15px;
          
          .el-form-item__label {
            font-size: 14px;
          }
          
          .el-input__wrapper {
            .el-input__inner {
              height: 36px;
            }
          }
        }
      }
    }
  }
}
</style> 